<template>
  <view class="market safe-box">
    <!-- <u-navbar leftText="返回" title="集市" :placeholder="true">
            <view class="u-nav-slot" slot="right">
                <u-icon name="home" size="20"></u-icon>
            </view>
        </u-navbar> -->
    <List ref="list" refresherEnabled @scrolltolower="scrolltolower" :status="status" :scrollTop="scrollTop"
      @refresherrefresh="refresherrefresh"
    >
      <view class="u-demo-block" v-for="item in list" :key="item._id">
        <NewsItem :data="item" @delete="del"></NewsItem>
      </view>
    </List>
    <view class="plus-icon">
      <u-icon name="plus-circle" color="#2979ff" size="50" @click="toPublish"></u-icon>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'Market',
    data() {
      return {
        albumWidth: 0,
        query: {
          index: 1,
          size: 10
        },
        list: [],
        status: 'loadmore',
        scrollTop: 0
      }
    },
    methods: {
      async getList(reset = false) {
        const res = await this.$http.get('/fan/news', this.query)
        if (reset) this.list = []
        this.list = [...this.list, ...res.data.records]
        this.status = res.data.records.length < this.query.size ? 'nomore' : 'loadmore'
      },
      scrolltolower() {
        this.$loadMore(this)
      },
      toPublish() {
        this.$nav.to('/pages/publish/publish', {}, {
          publish: (data) => {
            console.log(data)
            // this.getListt()
            this.initScroll()
            this.list.unshift(data)
          }
        })
      },
      del(id) {
        this.$http.delete('/news', {
          id
        }).then(() => {
          this.list = this.list.filter((item => item._id !== id))
        })
      },
      initScroll() {
        this.scrollTop = -1
        this.$nextTick(() => {
          this.scrollTop = 0
        })
      },
      async refresherrefresh() {
        this.query.index = 1
        await this.getList(true)
        this.$refs.list.closeRefresh()
      }
    },
    mounted() {
      this.getList()
    }
  }
</script>

<style lang="scss">
  .u-nav-slot {
    /* #ifdef MP-WEIXIN */
    margin-right: 200rpx;
    /* #endif */
  }

  .plus-icon {
    position: fixed;
    right: 50rpx;
    bottom: 50rpx;
    /* #ifdef MP-WEIXIN */
    bottom: 20rpx;
    /* #endif */
    /* #ifdef H5 */
    bottom: 120rpx;
    /* #endif */
  }

  .u-demo-block {
    margin-bottom: 30rpx;
  }
</style>
